<template>
    <view class='content'>
        <view class="main">
            <view class="head-card">
                <view class="name">{{ store.shopName }}</view>
                <view class="wd">我的余额（元）</view>
                <view class="price">¥{{ myData.balance / 100 }}</view>
                <view class="foot">
                    <view>充余额：¥{{ myData.bonusBalance / 100 }}</view>
                    <view>赠余额：¥{{ myData.rechargeBalance / 100 }}</view>
                </view>
            </view>
            <view class="box rechange">
                <view class="title">
                    <view class="tab">
                        <view @click="changeTab(1)" :class="{active:tab === 1}">充值</view>
                        <view @click="changeTab(3)" :class="{active:tab === 3}">消费</view>
                    </view>
                </view>
                <view class="list">
                    <view class="item" v-for="item in list" :key="item.id">
                        <view>
                            <view>{{item.title}}</view>
                            <view class="date">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}}</view>
                        </view>
                        <view>
                            <view :class="{cFF5D15:item.bizType === 3,c009A44:item.bizType === 1}">
                                <text v-show="item.bizType === 1">+</text>{{item.price / 100}}</view>
                            <view></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
import { walletRechargePackageList,getWallet,walletTransactionPage } from '@/service/index';
import { onLoad, onShow } from "@dcloudio/uni-app";
import dayjs from 'dayjs';
const store = uni.getStorageSync('store')
const list = ref([])
const list1 = ref([])
const list3 = ref([])
const tab = ref(1)
const checkItem = ref({})
const myData = ref({
    balance:0,
})
const changeTab = (index) => {
    tab.value = index;
    if (index === 1) {
        // list.value = list1.value
        getDetail(1)
    } 
    if(index === 3) {
        // list.value = list3.value
        getDetail(2)
    }
}
const getDetail = (type)=>{
    walletTransactionPage({pageNo:1,pageSize:100,type}).then(res=>{
        // res.list.forEach(v=>{
        //     if(v.bizType === 1){
        //         list1.value.push(v)
        //     }
        //     if(v.bizType === 3){
        //         list3.value.push(v)
        //     }
        // })
        if(type === 1){
            list.value = res.list
        }
        if(type === 2){
            list.value = res.list
        }
        // changeTab(1)
    })
}
const itemChange = (item)=>{
    checkItem.value = item;
    getDetail(2)
}
const getData = ()=>{
    getWallet({isLogin:true}).then(res=>{
        console.log(res,'res');
        myData.value = res;
        if(!myData.value.bonusBalance){ // 充值余额为空的时候,赠送余额等于余额
            myData.value.rechargeBalance = myData.value.balance
        }
    })
}
const filterSale = (item) => {
    return ((1 - (item.bonusPrice / (item.payPrice + item.bonusPrice))) * 10).toFixed(1)
}
onLoad(() => {
    getDetail(1);
    getData();
})
</script>
<style lang='less' scoped>
.content {
    
    display: flex;
    flex-direction: column;
    height: 100vh;
    .main{
        padding: 22rpx 24rpx;
        height: 100%;
        flex: 1;
        overflow-y: scroll;
    }
    .head-card {
        position: relative;
        width: 100%;
        height: 314rpx;
        background: linear-gradient(315deg, #00B952 0%, #00E565 100%);
        border-radius: 20rpx;
        color: #fff;
        padding: 16rpx 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .name {
            font-weight: 600;
            font-size: 32rpx;
            padding: 0 24rpx;
        }

        .price {
            font-weight: 600;
            font-size: 100rpx;
            text-align: center;
        }

        .wd {
            padding: 0 24rpx;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
            border-top: 2rpx solid rgba(255, 255, 255, 0.32);
            padding: 0 24rpx;
            padding-top: 24rpx;
        }

        .detail {
            position: absolute;
            right: -2rpx;
            top: 45%;
            display: flex;
            align-items: center;
            border-radius: 28rpx 0rpx 0rpx 28rpx;
            border: 2rpx solid #FFFFFF;
            padding: 8rpx 12rpx 8rpx 24rpx;

            image {
                width: 12rpx;
                height: 21rpx;
                margin-left: 14rpx;
            }
        }
    }

    .rechange {
        background-color: #fff;
        padding:0 24rpx;
        padding-top: 24rpx;

        .title {
            font-weight: 600;
            font-size: 28rpx;
            color: #333333;
            .tab{
                display: flex;
                align-items: center;
                justify-content: space-around;
                border-bottom: 2rpx solid #EEEEEE;
                height: 60rpx;
                view{
                    height: 100%;
                    border-bottom:4rpx solid transparent;
                }
                .active{
                    color: #009A44;
                   
                    border-bottom:4rpx solid #009A44;
                }
            }
        }

        .list {
            padding: 24rpx 0;
            .item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 26rpx;
                padding-top: 24rpx;
                border-bottom: 2rpx solid #EEEEEE;
                font-weight: 600;
                .cFF5D15{
                    color: #FF5D15;
                }
                .c009A44{
                    color: #009A44;
                }
                .date{
                    margin-top: 10rpx;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #999999;
                }
            }
        }
    }

    .footer {
        padding: 34rpx 26rpx;
        box-shadow: 0rpx -12rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);
        background-color: #fff;

        .btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
            border-radius: 60rpx;
            color: #fff;
            height: 100rpx;
            padding: 18rpx 42rpx;
            box-sizing: border-box;
            text-align: center;
        }
    }
}
</style>